<template>
<div id="out20">
    <div id="top3">
		<a href="#/DaiFahuo"><img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" /></a>
		<span>物流信息</span>
	</div>
	<div class="back"></div>
	<p class="tittle">包裹1</p>
	<p class="yunDan">运单号： <span>1485269676465</span></p>
	<p class="yunDan">快递公司： <span>快递100</span></p>
	<div class="wuLiu">
		<p class="tittlee">卖家发货</p>
		<p>2017-06-09 22:44:36</p>
		<p class="tittlee">包裹正在等待蓝瘦</p>
		<p>2017-06-10 08:09:22</p>
		<p class="tittlee">快件 · · ·</p>
		<div></div>
		<span></span>
		<span></span>
		<span></span>
	</div>
	<div class="caiNi">
	    <p>
	    	    猜你喜欢
	    	    <span></span>
	    	    <span></span>
	    </p>
	    <div>
	    	    <img src="../assets/img/shouye/3meishi/yeshenglanmeiguozhi.png"/>
	    	    <p>血色浪漫工作原理</p>
	    	    <p>￥100</p>
	    </div>
	     <div>
	     	<img src="../assets/img/shouye/3meishi/yuanweijianguo.png"/>
	    	    <p>有危机感</p>
	    	    <p>￥99</p>
	     </div>
	</div>
	
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				$("#out20 .wuLiu>.tittlee").eq(2).css("opacity","0.7");
				$("#out20 .wuLiu>span").eq(2).css("opacity","0.7");
				for (var i = 0; i < $("#out20 .wuLiu>span").length; i++) {
					$("#out20 .wuLiu>span").eq(i).css("top",4+i*10.1+"rem");
				}
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out20{
		height: 100vh;
		background-color: #f2f2f2;
		overflow: scroll;
	}
	#out20>.back{
		height: 9.6rem;
	}
	#out20 #top3 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}
	#out20 #imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#out20 #top3>span {
		width: 57.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
		box-sizing: border-box;
		padding-right: 9rem;
	}
	#out20 .tittle{
		font-size: 3.6rem;
		color: #4d4d4d;
		padding: 3rem 2rem;
		background: #FFFFFF;
		border-bottom: 0.1rem solid #CCCCCC;
	}
	#out20 .yunDan{
		font-size: 2.6rem;
		padding: 2rem;
		background: #FFFFFF;
		border-bottom: 0.1rem solid #CCCCCC;
		color: #808080;
	}
	#out20 .yunDan>span{
		color: #4d4d4d;
		font-size: 2.8rem;
	}
	#out20 .wuLiu{
		height: 60rem;
		padding-left: 10rem;
		position: relative;
	}
	#out20 .wuLiu>p{
		font-size: 2.4rem;
		padding-top: 2rem;
		color: #808080;
	}
	#out20 .wuLiu>.tittlee{
		font-size: 2.8rem;
		padding-top: 3rem;
		color: #4d4d4d;
	}
	#out20 .wuLiu>div{
		width: 0.2rem;
		height: 31.4rem;
		background-color: #cccccc;
		position: absolute;
		top: 4rem;
		left: 6rem;
	}
	#out20 .wuLiu>span{
		width: 1.2rem;
		height: 1.2rem;
		background:  #808080;
		position: absolute;
		left: 5.5rem;
		border-radius: 50%;
	}
	#out20 .caiNi{
		background: #FFFFFF;
		height: 38rem;
	}
	#out20 .caiNi>p{
		text-align: center;
		font-size: 3rem;
		height: 6rem;
		line-height: 6rem;
		position: relative;
	}
	#out20 .caiNi>p>span{
		position: absolute;
		width: 6rem;
		height: 0.1rem;
		top: 50%;
		left: 22rem;
		margin-top: -0.05rem;
		background-color: #cccccc;
	}
	#out20 .caiNi>p>span:last-child{
		left: 44rem;
	}
	#out20 .caiNi>div{
		display: inline-block;
		width: 33rem;
		height: 28rem;
		border: solid 0.1rem #cccccc;
		text-align: center;
		box-sizing: border-box;
		padding-top: 3rem;
		margin-left: 2rem;
	}
	#out20 .caiNi>div>p{
		font-size: 2.4rem;
		padding-top: 4rem;
	}
	#out20 .caiNi>div>p:last-child{
		padding-top: 1rem;
		color: #FF0000;
	}
	#out20 .caiNi>div>img{
		width: 14.1rem;
		height: 14.1rem;
	}
	#out20 .caiNi>div:last-child>img{
		width: 22.2rem;
		height: 12.7rem;
		margin-bottom: 1.5rem;
	}
</style>